/**
 * @description
 * checkbox
 * @author
 * gf
 * @todo 待完善
 */
import React from 'react'
import icon_checkbox from '@/assets/icons/icon-checkbox.png'
import icon_unCheckbox from '@/assets/icons/icon-unCheckbox.png'
import icon_checkbox_disabled from '@/assets/icons/icon-checkbox-disabled.png'
import styled from 'styled-components'

interface CheckedBox {
  checked?: boolean
  disabled?: boolean
  onClick?: any
  style?:React.CSSProperties
}

const CheckDiv = styled.div`
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  &:hover{
    cursor: pointer;
  }
  > img {
    width: 100%;
    height: 100%;
  }
`

const SingleCheck = (props: CheckedBox) => {
  const { disabled, onClick, checked, style } = props
  return (
    <CheckDiv onClick={onClick} style={style}>
      <img
        src={
          disabled
            ? icon_checkbox_disabled
            : checked
            ? icon_checkbox
            : icon_unCheckbox
        }
        alt="checked"
      />
    </CheckDiv>
  )
}

export default SingleCheck
